<template>
  <div class="contacts-left">
    <div class="top">
      <div class="title">配件管理</div>
      <!-- <Plus class="add-icon" @click="add" v-auth="'add'"></Plus> -->
    </div>
    <div class="bottom">
      <el-scrollbar>
        <ul class="tab-1">
          <li
            v-for="(item, index) in viewUserList"
            :key="index"
            @click="activeFn(item)"
            :class="`${item.isActive ? 'active' : ''}`"
          >
            <span>{{ item.name }}</span>
          </li>
        </ul>
        <el-empty v-if="!viewUserList.length" :image-size="100" />
      </el-scrollbar>
    </div>
    <CarDrawer v-model:drawerVisible="drawerVisible" v-model:paramsCar="paramsCar" />
  </div>
</template>
<script setup lang="ts" name="Contacts">
import { ref, onMounted } from "vue";
import type { User } from "@/api/interface";
import mittBus from "@/utils/mittBus";
// import { Plus } from "@element-plus/icons-vue";
import CarDrawer from "./CarDrawer.vue";
import { useDict } from "@/hooks/useDict";

const { getDictAsync } = useDict(["accessoryType"]);
const drawerVisible = ref(false);
const paramsCar = ref({
  uiType: 0
});
// 变量
const viewUserList = ref<User.ResUserList[]>([]);

// 点击左侧类型查询配件列表
const activeFn = itm => {
  mittBus.emit("searchAccessory", { typeId: itm.id });
  viewUserList.value = viewUserList.value.map(item => {
    item.isActive = item.id === itm.id;
    return item;
  });
};

// 获取左侧配件列表
const getPartTypeList = async () => {
  const res = await getDictAsync("accessoryType");
  viewUserList.value = [{ isActive: true, name: "全部" }, ...res.data];
};

const add = () => {
  paramsCar.value = { uiType: 0 };
  drawerVisible.value = true;
};

mittBus.on("detailAccessory", (data: any) => {
  paramsCar.value = data;
  drawerVisible.value = true;
});
mittBus.on("addAccessory", () => {
  add();
});

onMounted(() => {
  getPartTypeList();
});
</script>
<style lang="scss" scoped>
ul,
li {
  padding: 0;
  margin: 0;
}
.contacts-left {
  display: flex;
  flex-flow: column nowrap;
  user-select: none;
  .bottom {
    flex: 1;
    height: 0;
    .tab-1 {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      width: 100%;
      margin-top: 10px;
      color: #333333;
      li {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 56px;
        padding-left: 20px;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
        border-bottom: 1px solid #f4f4f4;
        border-left: 2px solid transparent;
      }
      .active {
        background: var(--el-color-primary-light-9);
        border-left: 2px solid var(--el-color-primary);
      }
    }
    .tab-2 {
      :deep(.el-tree) {
        height: 80%;

        // padding: 0 30px !important;
        overflow: auto;
        .el-tree-node__content {
          box-sizing: border-box;
          height: 56px;
          border-left: 2px solid transparent;
        }
      }
      :deep(.el-tree--highlight-current) {
        .el-tree-node.is-current > .el-tree-node__content {
          background-color: var(--el-fill-color-light);
          .el-tree-node__label,
          .el-tree-node__expand-icon {
            color: #333333;
          }
          .is-leaf {
            color: transparent;
          }
          &:has(.custom-tree-node-leaf) {
            background: var(--el-color-primary-light-9);
            border-left: 2px solid var(--el-color-primary);
          }
        }
      }
      .custom-tree-node {
        font-size: 14px;
        color: #333333;
      }
      .custom-tree-node-leaf {
        display: flex;
        align-items: center;
        span:first-child {
          width: 32px;
          height: 32px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        span:last-child {
          margin-left: 10px;
          font-size: 14px;
          color: #333333;
        }
      }
    }
  }
}
.top {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 72px;
  padding: 30px 35px;
  color: #333333;
  .add-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
}
</style>
